import TinyReact from '../src';

const root = document.getElementById('root');

class Alert extends TinyReact.Component {
  constructor(props) {
    super(props);
  }
  render(props) {
    return <div>Alert:{this.props.name}</div>;
  }
}

const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test123">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h6>(观察: 这个将会被改变)</h6>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段被修改过的内容</span>
    <button onClick={() => alert('你好！！！')}>点击我</button>
    2, 3
    <input type="text" value="13" />
  </div>
);

// 更新类型不同，并且后面的不是 组件
TinyReact.render(<Alert name="haha" />, root);
setTimeout(() => {
  TinyReact.render(modifyDOM, root);
}, 2000);
